import React from 'react';
import {Avatar, Breadcrumb, message,Dropdown, Space, Layout, Menu} from "antd";
import {Link, useNavigate} from "react-router-dom";
import {HomeOutlined, LogoutOutlined} from "@ant-design/icons";
import {a} from "@/utils";
import {postLogoutAsync, useSelectorAuth} from "@/store/slices/auth";
import {useAppDispatch} from "@/hooks";

function IndexHeader() {
    const auth = useSelectorAuth();
    const dispatch = useAppDispatch();
    const navigate = useNavigate();
    const menu = (
        <Menu
            items={[
                {
                    key: '1',
                    label: (
                        <Link to={"/"}>返回首页</Link>
                    ),
                    icon:<HomeOutlined />
                },
                {
                    key: '2',
                    label: (
                        <a target="_blank" onClick={async e=>{
                            e.preventDefault();
                            await dispatch(postLogoutAsync());
                            message.success("退出成功");
                            navigate("/login");

                        }} rel="noopener noreferrer" href="">
                            退出登陆
                        </a>
                    ),
                    icon: <LogoutOutlined />
                }
            ]}
        />
    );
    return (
        <Layout.Header className="site-layout-background" style={{ padding: 0 }}>
            <Breadcrumb style={{ margin: '16px 0' }}>
                <Breadcrumb.Item>User</Breadcrumb.Item>
                <Breadcrumb.Item>Bill</Breadcrumb.Item>
            </Breadcrumb>

            <Space>
                <span>欢迎回来</span>
                <Dropdown overlay={menu}>
                    <a onClick={e => e.preventDefault()}>
                        <Avatar src=""/>
                    </a>
                </Dropdown>

            </Space>
        </Layout.Header>
    );
}

export default IndexHeader;